<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta name="author" content="王劲翔" />
		<title>Document</title>
		<style>
			.box {
				width: 542px;
				height: 542px;
				margin: 50px auto;
				background-image: url(./images/clock.png);
				position: relative;
			}
			.box img {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img class="hour" src="./images/hour.png" alt="" />
			<img class="minute" src="./images/minute.png" alt="" />
			<img class="second" src="./images/second.png" alt="" />
		</div>
		<script>
			let h = document.querySelector(".hour")
			let m = document.querySelector(".minute")
			let s = document.querySelector(".second")
			tick(s, 1000)
			tick(m, 60000)
			tick(h, 3600000)
			function tick(ele, time) {
				let tickTemp = 1
				setInterval(() => {
					ele.style.transform = `translate(-50%, -50%) rotate(${
						6 * tickTemp++
					}deg)`
				}, time)
			}
		</script>
	</body>
</html>
